<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="item-list" v-cloak>
        <!-- <div class="item" v-for="item, i in items" :key="i">
            <div class="cover">
                <img src="https://tcdn.udeve.net/fang2021/377c3034-69e7-4f70-83a1-91d4b3d8f819.jpg" />
            </div>
            <div class="footer">
                <div class="title">{{ item.title }}</div>
            </div>
        </div> -->
        <div style="display: flex;flex-wrap: wrap;padding: 10px;">
            <div class="product-card"
                v-for=" item, i in items " :key="i">
                <img class="product-image" :src="item.images[0]" mode="aspectFill" />
                <div class="product-details">
                    <div class="product-title">{{ item.name }}</div>
                    <div class="product-info">
                        <div class="product-price">{{ item.score }} 积分</div>
                        <div class="product-quantity">{{ item.stock > 5 ? '剩余' + item.stock : '仅剩' + item.stock }}件
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
        };
    },
    props: {
        items: { type: Array, default: [] },
    },

    mounted: function () { },

    computed: {},

    methods: {},
};
</script>

<style scoped>
.product-card {
	width: 330px;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	border: 1px solid #F4F4F4;
	margin-bottom: 30px;
	box-sizing: border-box;
}
.product-card:nth-child(2n){
	margin-left: calc( 100% - 660px);
}

.product-image {
	width: 330px;
	height: 330px;
	display: block;
	border-radius: 10px 10px 0 0;
}

.product-details {
	padding: 23px;
}

.product-title {
	font-size: 28px;
	color: #333333;
	margin-bottom: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.product-info {
	display: flex;
	align-items: center;
	justify-content: space-between;

}

.product-price {
	font-size: 28px;
	font-weight: bold;
	color: #E93323;
	max-width: 180px;
}

.product-quantity {
	font-size: 24px;
	color: #999999;
}
</style>
